<template>
	<view class="filtrate-box" :style="{backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}" v-if="filtrateShow">
		<view class="aside">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="conter-title"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx','textAlign':'center'}">
					省份1
				</view>
				<view class="dropdown-item" v-for="(item,index) in provinceList" :key="item.regionId"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+4+'rpx','color':(currentFiltrateAsideIndex==index)?activeColor:itemTextColor}"
					@tap.stop="handleSfChange(item,index)">{{item.regionName}}</view>
			</scroll-view>
		</view>

		<view class="conter">
			<scroll-view scroll-y="true" style="height: 100%;" :scroll-top="scrollTop">
				<view class="conter-title"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
					{{ dataType == 'area' ? '城市' : '省份' }}
				</view>
				<view style="height: 120rpx;"></view>
				<view :class="['dropdown-item',currentFiltrateConterIndex==index?'on':'']"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(currentFiltrateConterIndex==index)?activeColor:itemTextColor}"
					v-for="(item,index) in cityList" :key="item.regionId" @tap.stop="handleCityChange(item,index)">
					{{item.regionName}}
				</view>
			</scroll-view>
		</view>
		<view class="conter" style="left: 300rpx;">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="conter-title"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
					{{ dataType == 'area' ? '区县' : '城市' }}
				</view>
				<view style="height: 120rpx;"></view>
				<view :class="['dropdown-item',districtIds.indexOf(item.regionId) != -1 ?'on':'']"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(districtIds.indexOf(item.regionId) != -1)?activeColor:itemTextColor}"
					v-for="(item,index) in districtList" :key="item.regionId" @tap.stop="handleDistrictChange(item)">
					{{item.regionName}}
				</view>
			</scroll-view>
		</view>
		<view class="acea-row row-middle row-between filtrate-btn">
			<view class="reset" @tap.top="filtrateReset()">重置</view>
			<view class="confirm" @tap.top="filtrateConfirm()">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		getCityApi
	} from "@/api/api.js";
	import {
		getCityId
	} from '@/filters/commFilter.js'
	export default {
		props: {
			filtrateArr: {
				type: Array,
				default: () => [{
						type: '区域'
					}
				],
			},
			// dataType为area为区域 为city为城市
			dataType: {
				type: String,
				default: 'area'
			},
			multiple:{
				type: Boolean,
				default: true
			}
		},
		watch: {
			filtrateArr: {
				handler(newVal, oldVal) {
					console.log('newVal',newVal)
					if(newVal){
			
						this.goInitArea();
					}
				},
				deep: true,
				immediate: true
			},
			filtrateShow(newVal){
				if(newVal){
					if(this.provinceList.length<1){
						uni.showLoading({
							title: '加载中'
						});
					}
				}
			}
		},
		mounted() {
				console.log(this.dataType)
		},
		data() {
			return {
				cityId: 0,
				itemPadding: 24,
				itemFontSize: 28,
				itemHeight: 88,
				itemTextColor: '#666',
				activeColor: '#ee212d',
				show: true,
				filtrateShow: false,
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: 0,
				bgcolor: '#fff',
				cityList: [],
				districtList: [],
				scrollTop: 0,
				districtIds: [], //已选区县id
				districtNames: [], //已选区县id
				provinceList:[]
			}
		},
		methods: {
			async goInitArea() {
				try {
	
					let {
						data
					} = await getCityApi();
		
					let provinceList = data;
					this.provinceList = data;
					let city = this.$city + '';
					this.cityId = Number(city.substring(0,4)+'00')
					let cityList = [];
					let districtList = [];
					console.log(data)
					data.map((province, provinceIndex) => {
						province.child.map((city, cityIndex) => {
							if (city.regionId == this.cityId) {
								this.currentFiltrateAsideIndex = provinceIndex
								districtList = this.dataType == 'area' ? city.child : province.child;
								this.currentFiltrateConterIndex = this.dataType == 'area' ? cityList.length : provinceIndex;
								this.scrollTop = this.currentFiltrateConterIndex * 57;
							}
							cityList.push(city);
						})
					});
					this.districtList = districtList;
					this.$nextTick(()=>{
						// this.provinceList =  JSON.parse(JSON.stringify(provinceList)) 
						console.log('this.provinceList',this.provinceList)
						this.cityList = this.provinceList[0].child
						uni.hideLoading();
					})
					// this.cityList = this.dataType == 'area' ? cityList : provinceList;
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				} finally {}
			},
			//点击省份
			handleSfChange(item, index) {
				this.currentFiltrateAsideIndex = index;
				this.currentFiltrateConterIndex = 0;
				this.cityList = item.child;
				this.districtList = []
			},
			//点击城市时
			handleCityChange(item, index) {
				this.currentFiltrateConterIndex = index;
				this.scrollTop = 57 * index
				this.districtList = item.child;
				
			},
			//点击区县
			handleDistrictChange(item) {
				if(this.multiple){
					if (this.districtIds.indexOf(item.regionId) != -1) {
						const ind = this.districtIds.indexOf(item.regionId)
						this.districtIds.splice(ind, 1);
						this.districtNames.splice(ind, 1);
					} else {
						this.districtIds.push(item.regionId)
						this.districtNames.push(item.regionName)
					}
				}else{
					this.districtIds = [item.regionId];
					this.districtNames = [item.regionName]
				}
				
			},
			//点击重置
			filtrateReset() {
				this.districtIds = [];
				this.districtNames = []
				this.goInitArea()
			},
			//点击确认
			filtrateConfirm() {
				this.$emit('area', {
					cityid: this.cityId,
					districtIds: this.districtIds.join(','),
					regionName: this.districtNames.join(',')
				});
				this.filtrateShow = false
			}

		}
	}
</script>

<style>
	/* 筛选 */
	.filtrate-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 1999;
	}

	.filtrate-box .aside {
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 150rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.filtrate-box .aside .dropdown-item {
		height: 88rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter {
		height: calc(100% - 100rpx);
		width: 300rpx;
		position: absolute;
		margin: 0rpx 0 0 150rpx;
		padding: 24rpx 14rpx;
	}


	.filtrate-box .conter .dropdown-item {
		margin: auto;
		width: 90%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: wrap;

	}

	.filtrate-box .conter .dropdown-item:nth-child(2n) {
		margin-right: 18rpx;
	}

	.filtrate-box .conter .conter-title {
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		color: rgba(0, 0, 0, 1);
		width: 272rpx;
		height: 100rpx;
		position: fixed;
		background-color: #ffffff;
	}

	.filtrate-box .conter .dropdown-item.on {
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}

	.filtrate-box .filtrate-btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.filtrate-box .filtrate-btn .reset {
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}

	.filtrate-box .filtrate-btn .confirm {
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}
</style>